<template>
	<view class="page ">
		<u-swiper @click="toSlide" :list="banner" mode="rect" name="image" interval="5000" height="400"></u-swiper>
		<view>
			<u-tabs active-color="#ffd100" :list="cateList" :is-scroll="true" :current="current"
				@change="change"></u-tabs>
		</view>
		<view class="p12">
			
			<view v-for="(item,index) in list" :key="index" class="bg-white p15 u-flex brs5 mb12"
				style="align-items: flex-start;box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.05);">

				<view class="u-f1 pt2">
					<view class="u-flex u-f-jsb">
						<view class="fz16 u-font-bold u-line-2" style="color: #4CA8E7;">
							{{item.name}}
						</view>
						<view class="ml5 c6 u-flex">
							<image src="../../static/image/ic-nav.png"
								style="width: 32rpx;height: 32rpx;margin-right: 4rpx;">
								{{item.far}}
						</view>
					</view>
					<view class="fz13 c6 mt10 u-f-jsb u-flex">
						<view><u-icon name="clock" class="#666"></u-icon><span class="ml2">{{item.time}}</span></view>
						
						<view class="btn" style="background: #00C13C;" @click.stop="toCall(item.mobile)" v-if="item.mobile">电话</view>
						
					</view>
					<view class="fz13 c6 mt6 u-flex u-f-jsb" style="position: relative;">
						<view class="u-flex">
							<u-icon name="map" class="#666"></u-icon><span class="ml2 u-line-1"
								style="width: 450rpx;">{{item.address}}</span>
						</view>
						<view class="u-flex">

							
							<view class="btn" @click.stop="toMap(item)">导航</view>
						</view>
					</view>
					<view class="mt5 u-flex">
						<view class="tag" v-for="(tag,idx) in item.tags" :key="idx">{{tag}}</view>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				current:0,
				cateList:[],
				banner: [],
				loadStatus: '',
				list: []
			}
		},
		computed: {},
		onShow() {
			
			
			uni.getLocation({
				type: 'wgs84',
				success: (res) => {
					this.longitude = res.longitude
					this.latitude = res.latitude
					this.getCate()
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
				},
				fail: (res) => {
					this.getCate()
				},
			});
			this.$api.adList({
				type: 2
			}, res => {
				if (res.code) {
					this.banner = res.data
				}
			})

			this.getAuth()

		},
		// 页面下拉到底部触发
		onReachBottom() {},
		methods: {
			getCate(){
				
				
				this.$api.welfareCate({page:1,limit:100}, res => {
					if (res.code) {
						this.cateList = res.data.data
						let item={
							id:0,
							name:'全部'
						}
						this.cateList.unshift(item)
						this.initData()
					}
				})
			},
			change(e){
				this.current=e
				this.initData()
			},
			toCall(phone) {



				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			getAuth() {

				uni.getSetting({
					success(res) {
						if (!res.authSetting['scope.userLocation']) {
							// 位置权限未授权
							uni.authorize({
								scope: 'scope.userLocation',
								success() {
									// 用户已授权
									console.log('位置权限已授权');
								},
								fail() {
									// 用户拒绝授权
									uni.showModal({
										title: '提示',
										content: '此功能需要获取您的位置信息，请确认授权',
										success: function(modalRes) {
											if (modalRes.confirm) {
												uni.openSetting({
													success: function(settingRes) {
														if (settingRes.authSetting[
																'scope.userLocation'
															]) {
															// 用户在设置页授权成功
															console.log(
																'位置权限在设置页授权成功');
														}
													}
												})
											}
										}
									});
								}
							});
						} else {
							// 位置权限已授权
							console.log('位置权限已授权');
						}
					}
				});
			},
			toMap(item) {

				uni.openLocation({
					latitude: Number(item.latitude),
					longitude: Number(item.longitude),
					name: item.name,
					address: item.address,
					success: function() {
						console.log('success');
					},
					fail(err) {
						console.log(err);

					}
				});
			},
			toInfo(item) {
				uni.navigateTo({
					url: '/pages/index/detail?id=' + item.id
				})
			},
			initData() {
				this.page = 1
				this.list = []
				this.getList()
			},
			getList() {


				this.$api.welfareList({
					page: this.page,
					category_id:this.cateList[this.current].id,
					latitude: this.latitude,
					longitude: this.longitude
				}, res => {
					if (res.code) {

						let _list = res.data.data

						this.list = [...this.list, ..._list]

						console.log(this.list)
						// 判断所有数据是否请求完毕
						if (res.data.total > this.list.length) {
							this.page++
							this.loadStatus = 'more'
						} else {
							this.loadStatus = 'noMore'
						}
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.btn {
		background: #4CA8E7;
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		color: #fff;
		padding: 8rpx 40rpx;
	}
	
	.tag {
		border-radius: 10rpx;
		border: 1px solid #ffd100;
		color: #ffd100;
		font-size: 22rpx;
		padding: 4rpx 20rpx;
		margin-right: 20rpx;
	}
</style>